<template>
  <div>
    <div class="header-bg">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <div class="mine-info">
        <div class="btn">
          <span class="btn-img"
            ><img
              class="round-img"
              src="http://liufusong.top:8080/img/profile/avatar.png"
              alt=""
          /></span>
          <span>游客</span>
          <button>去登录</button>
        </div>
      </div>
    </div>
    <van-grid :column-num="3">
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="wap-home-o" text="我的出租" />
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="debit-pay" text="成为房租" />
      <van-grid-item icon="manager-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <van-button
      ><van-image
        width="345"
        height="85"
        src="http://liufusong.top:8080/img/profile/join.png"
    /></van-button>
  </div>
</template>

<script>
export default {
  name: 'user-page',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">
.header-bg {
  width: 100%;
  position: relative;
  height: 300px;
  // background-color: rgb(232, 75, 75);
  img {
    width: 100%;
  }

  .mine-info {
    width: 320px;
    height: 165px;
    background-color: white;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-160px);
    box-shadow: 0 0 10px 3px #ddd;
    z-index: 3;
    .btn-img {
      background-color: #fff;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      text-align: center;
      line-height: 70px;
      box-shadow: 0 2px 2px #bdbdbd;
      .round-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    .btn {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-flow: column;
      position: absolute;
      top: -30px;
      left: 50%;
      height: 165px;
      transform: translateX(-30px);
      button {
        background-color: #21b97a;
        width: 70px;
        height: 30px;
        color: white;
        border-radius: 7px;
      }
    }
  }
}
.van-button--normal {
  margin-top: 30px;
}
</style>
